<template>
  <!-----添加商品信息----->
  <el-dialog title="添加商品信息" :visible.sync="dialogFormVisible"
  style="width: 100vw">
    <el-transfer
      filterable
      :filter-method="filterMethod"
      filter-placeholder="商品条码"
      v-model="value"
      :data="data"
      :titles="['选择商品','进货表单']"
      :button-texts="['取消选择','确认选择']"
      :render-content="renderFunc"
      @change="handleChange"
      style="width: auto;text-align: left">
    </el-transfer>
    <el-button type="primary" @click="selectGoods()">确定</el-button>
  </el-dialog>
</template>

<script>

  import bus from "../../../bus";
  import {loadAllGoods} from "../../../services/goodsService";

  export default {
    name:"SelectGoods",
    data() {
      return {
        data: [],
        dialogFormVisible: false,
        goodList: [],
        value:[],//被选择的good
        filterMethod(query, item) {
          return item.barcode.indexOf(query) > -1;
        },
        renderFunc(h, option) {
          //console.log('**************************')
          return (
          <el-tooltip>
            <div slot="content">
              商品:{option.label}<br/>
              条码:{option.key}<br/>
              进价:{option.cost}<br/>
            </div>
            <span>
              { option.label } - { option.key }
            </span>
          </el-tooltip>)
        }
      };
    },
    mounted:function(){
      this.loadGoods()
    },
    methods: {
      loadGoods(){
        loadAllGoods().then(success=>{
          this.goodList=success;
          this.generateData();
        },failed=>{
          this.$message({
            message:'商品列表加载失败',
            type:'error'
          })
        })
      },
      generateData() {
        var _this=this;
        //const data = [];
        _this.goodList.forEach((good) => {
          //console.log(JSON.stringify(good))
          _this.data.push({
            label: good.good.name,
            key:good.good.barcode,
            value:good.good.barcode,
            cost:good.good.cost,
            barcode: good.good.barcode
          });

        });
      },
      handleChange(value, direction, movedKeys) {

      },
      selectGoods(){
        bus.$emit('selectGoods',this.value);
        this.dialogFormVisible=false;
      }
    }
  }
</script>

<style scoped>


</style>

